<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>观看直播</title>
    <link href="css/video-js.min.css" rel="stylesheet" th:href="@{/css/video-js.min.css}">
    <link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link href="css/style.css" rel="stylesheet" th:href="@{/css/style.css}">
    <link href="css/video.css" rel="stylesheet" th:href="@{/css/video.css}">
</head>

<body>
<!--导航栏-->
<div th:replace="header::header"></div>
<!--导航栏-->

<!--播放器-->
<div class="container-fluid">
    <div class="row">
        <div class="col-2"></div>
        <video-js class="col-6" controls height="550px" id="vid1" preload="auto">
            <source src="https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8"
                    th:src="${liveSource}"
                    type="application/x-mpegURL">
            <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser
                that <a
                        href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video-js>
        <div class="col-2" id="talks" style="padding: 0;">
            <iframe border="0" frameborder="no" id="mainFrame" onload="resizeIframe(this)"
                    src="/chat/liveId" style="height: 550px;" th:src="@{/chat/}+${liveId}"></iframe>
        </div>
        <div class="col-2"></div>
    </div>
    <div class="row">
        <div class="col-2"></div>
        <a class="btn btn-success" href="#" th:href="@{/live/material/}+${liveMaterial.id}"
           th:if="${liveMaterial}">下载直播资料</a>
    </div>

</div>
<!--播放器-->
<script src='/js/video.min.js' th:src="@{/js/video.min.js}"></script>
<script>
    // fake a livestream for easy testing
    var vid = document.getElementById('vid1');
    var player = videojs(vid);
    player.play()
</script>
</body>

</html>